<template>
  <div class="flex-col page">
    <!-- <c-title :hide="false" text='个人诺丽果'></c-title> -->
    <div class="flex-col relative group">
      <div class="flex-col self-stretch section">
        <div class="mt-24 flex-col">
          <div class="flex-row justify-between relative">
            <!-- <van-button type="default" icon="arrow-left" @click="goto" slot="left" style="background-color: rgba(0,0,0,0);"></van-button> -->

            <van-icon @click="goBack" name="arrow-left" size="16px" />
            <span class="font text">个人诺丽果</span>
            <span></span>
          </div>
          <div class="mt-16 flex-col list">
            <div class="flex-col section_2 list-item mt-15">
              <div class="flex-row justify-center">
                <div class="a">
                  <img class="image_3" src="https://shops.cg500.com/static/newimg/17108378076448795873.png" />
                </div>

                <div class="ml-2 group_2">
                  <span class="font_2">分红凭证</span>
                  <!-- <span class="font_3">额度</span> -->
                </div>
              </div>
              <div class="mt-10 flex-col">
                <div class="flex-row justify-center items-baseline self-stretch">
                  <span class="font_5 ml-3">{{ love_show.unable_data | fomatNum }}</span>
                </div>
                <!-- <span class="mt-2 self-center font_6 text_2">个</span> -->
              </div>
            </div>
            <div class="flex-col section_2 list-item mt-15">
              <div class="flex-row justify-center">
                <div class="a">
                  <img class="image_3" src="https://shops.cg500.com/static/newimg/17108378076514842759.png" />
                </div>
                <div class="group_2 ml-3">
                  <span class="font_2">购物积分</span>
                  <!-- <span class="font_3">额度</span> -->
                </div>
              </div>
              <div class="mt-10 flex-col">
                <div class="flex-row justify-center items-baseline self-stretch">
                  <span class="font_5 ml-3">{{ integral }}</span>
                </div>
                <!-- <span class="mt-2 self-center font_6 text_2">元</span> -->
              </div>
              <div class="flex-row justify-center self-stretch mt-9">
                <div v-if="is_can_zhuan" class="flex-col justify-start items-center button" @click="tansfer"><span class="font_7">互转</span></div>
                <div class="flex-col justify-start items-center button ml-18" @click="yueRecord"><span class="font_7">明细</span></div>
              </div>
              <!-- <div v-if="!is_can_zhuan" class="flex-col justify-start items-center button" @click="tansfer"><span class="font_7">互转</span></div> -->
            </div>
            <div class="flex-col list-item section_4 mt-15">
              <div class="flex-row justify-center self-stretch">
                <div class="a">
                  <img class="image_3" src="https://shops.cg500.com/static/newimg/17108378076554719061.png" />
                </div>
                <div class="group_2 ml-3-5">
                  <span class="font_2 text_3">诺丽果</span>
                  <!-- <span class="font_3">个数</span> -->
                </div>
              </div>
              <span class="self-center font_4 mt-9">{{ love_show.usable_data }}</span>
              <div class="flex-row justify-center self-stretch mt-9">
                <div class="ml-18 flex-col justify-start items-center button" @click="sandui"><span class="font_7">闪兑</span></div>
                <div class="ml-18 flex-col justify-start items-center button" @click="commission"><span class="font_7">售卖</span></div>
                <div class="ml-18 flex-col justify-start items-center button" @click="toRecord"><span class="font_7">明细</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-col section_6">
      <!-- <van-tabs v-model="selected" @click="switchItem">
        <van-tab id="1" title="全部">
          <div class="flex-col list_2">
            <div class="flex-col list-item_2" v-for="(item, index) in items" :key="index">
              <div class="flex-row justify-between">
                <span class="font_9 text_6">{{ item.source_name }}</span>
                <div class="flex-row items-baseline">
                  <span class="font ml-4-5">{{ item.change_value }}</span>
                </div>
              </div>
              <div class="flex-row justify-between mt-9-5">
                <span class="font_12">{{ item.created_at }}</span>
                <span class="font_11">{{ item.value_type_name }}</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab id="2" title="收入">
          <div class="flex-col list_2">
            <div class="flex-col list-item_2" v-for="(item, index) in items" :key="index">
              <div class="flex-row justify-between">
                <span class="font_9 text_6">{{ item.source_name }}</span>
                <div class="flex-row items-baseline">
                  <span class="font ml-4-5">{{ item.change_value }}</span>
                </div>
              </div>
              <div class="flex-row justify-between mt-9-5">
                <span class="font_12">{{ item.created_at }}</span>
                <span class="font_11">{{ item.value_type_name }}</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab id="3" title="支出">
          <div class="flex-col list_2">
            <div class="flex-col list-item_2" v-for="(item, index) in items" :key="index">
              <div class="flex-row justify-between">
                <span class="font_9 text_6">{{ item.source_name }}</span>
                <div class="flex-row items-baseline">
                  <span class="font ml-4-5">{{ item.change_value }}</span>
                </div>
              </div>
              <div class="flex-row justify-between mt-9-5">
                <span class="font_12">{{ item.created_at }}</span>
                <span class="font_11">{{ item.value_type_name }}</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs> -->
      <van-dialog v-model="show" title="温馨提示" show-cancel-button="false" showCancelButton="false" @confirm="confirm" confirmButtonColor="#f6ce54">
        <!-- <div class="dia">请输入你要兑换的诺丽果数量</div> -->
        <div class="dia">
          <input class="ipt" placeholder="请输入你要兑换的诺丽果数量" v-model="nlg_num" />
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  components: {},
  props: {},
  data() {
    return {
      items: [],
      selected: "0",
      love_show: {},
      integral: "",
      isLoadMore: true,
      page: 1,
      total_page: 0,
      show: false,
      nlg_num: "", //闪兑诺丽果数量
      is_can_zhuan: 0 //余额互转是否显示 1能转 0不能转
    };
  },
  mounted() {
    this.getData();
    this.getMemberData();
    this.getNetData(this.selected);
  },
  activated() {
    window.scrollTo(0, 0);
    this.getNetData(this.selected);
    // this.getIshuzhuan();
  },
  filters: {
    fomatNum(value) {
      let arr = value ? value.split(".")[0] : "";
      return arr;
    }
  },
  methods: {
    initData() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 诺丽果明细
    toRecord() {
      this.$router.push(this.fun.getUrl("love_list"));
    },
    // 购物积分--余额 明细
    yueRecord() {
      this.$router.push(this.fun.getUrl("balance"));
    },
    // 切换优惠券状态列表
    switchItem() {
      this.getNetData(this.selected);
    },
    // 是否可以余额互转
    getIshuzhuan() {
      let _this = this;
      $http.get("Nuoli.is_huzhuan", { uid: localStorage.getItem("uid") }, "").then(response => {
        console.log(response, "Nuoli.is_huzhuan");
        // if (response.result !== 1) {
        //   Toast(response.msg);
        //   return;
        // }
        if (response.result === 1) {
          // response.data == 1 可以转
          // if (response.data == 1) {
          //   _this.is_can_zhuan = 0;
          // }
          _this.is_can_zhuan = !response.data;
          
          return;
        }
        Toast(response.msg);
      });
    },
    getNetData(type) {
      Toast.loading({
        message: "",
        forbidClick: true
      });
      this.initData();
      $http.get("plugin.love.Frontend.Modules.Love.Controllers.love-records.index", { service_type: type, page: 1 }, "正在获取").then(response => {
        console.log(response, "闪兑走了吗");
        Toast.clear();
        if (response.result !== 1) {
          Toast(response.msg);
          return;
        }
        if (response.result === 1) {
          this.items = response.data.data;
          this.isLoadMore = true;
          this.total_page = response.data.last_page;
          if (!this.total_page) {
            this.total_page = 0;
          }
        }
      });
    },
    //获取更多数据
    getMoreData() {
      console.log("hongbao", this.isLoadMore);
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          service_type: this.selected,
          page: 1
        };
        let _url = "plugin.love.Frontend.Modules.Love.Controllers.love-records.index";
        $http.post(_url, json).then(response => {
          if (response.result === 1) {
            console.log(response.data, "data");
            var nextPageData = response.data.data;

            this.items = [...this.items, ...nextPageData];
            this.isLoadMore = true;
            console.log(this.items, "ffdfdd");
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    },
    commission() {
      this.$router.push(this.fun.getUrl("commission"));
    },
    sandui() {
      console.log("sandui");
      this.show = true;
    },
    // 余额互转
    tansfer() {
      this.$router.push(this.fun.getUrl("balance_transfer"));
    },
    confirm() {
      $http
        .post(
          "Nuoli.shandui",
          {
            uid: localStorage.getItem("uid"),
            num: this.nlg_num
          },
          " "
        )
        .then(response => {
          console.log(response, "闪兑走了吗");
          if (response.result !== 1) {
            Toast(response.msg);
            return;
          }
          Toast("闪兑成功");
          this.show = false;
          this.nlg_num = "";
          this.getData();
          this.getMemberData();
          this.getNetData(this.selected);
        });
    },
    //原来的数据
    getMemberData() {
      $http
        .post(
          "member.member.member-data",
          {
            v: 2,
            basic_info: 1
          },
          " "
        )
        .then(response => {
          console.log(response.data.member.love_show, "aaaaaaaaaaaaaaaaaaaaaaaaaaa");
          if (response.result === 1) {
            this.love_show = response.data.member.love_show;
          }
        });
    },
    getData() {
      $http
        .get(
          "Nuoli.user_shuju",
          {
            uid: localStorage.getItem("uid")
          },
          "..."
        )
        .then(res => {
          this.integral = res.data;
          console.log(res.data, "走了吗走了吗走了吗走了吗走了吗");
        });
    }
  }
};
</script>
<style scoped>
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

/deep/.van-tabs__line {
  background-color: #f6ce54 !important;
}
.dia {
  width: 280px;
  height: 75px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ipt {
  width: 258px;
  height: 37px;
  border: 1px solid grey;
  border-radius: 10px;
  padding-left: 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.section_4 {
  padding: 1.13rem 0 0.97rem;
  background-image: linear-gradient(0deg, #ffffff 0%, #ffffff 13%, #fffdf9 73%, #fffaf2 100%);
  box-shadow: 0rem 0rem 0.45rem 0.055rem #d1c6a724;
  border-radius: 0.63rem;
  border-left: solid 0.031rem #fff3e3;
  border-right: solid 0.031rem #fff3e3;
  border-top: solid 0.031rem #fff3e3;
  border-bottom: solid 0.031rem #fff3e3;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 0.13rem;
}

.mt-2 {
  margin-top: 0.4rem;
}

.ml-4 {
  margin-left: 0.25rem;
}

.a {
  width: 20px;
  height: 20px;
}

.font_7 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.72rem;
  color: #111111;
}

.button {
  padding: 0.31rem 0;
  background-color: #f6ce54;
  border-radius: 0.25rem;
  width: 3.38rem;
  height: 1.38rem;
}

.mt-4 {
  margin-top: 0.25rem;
}

.ml-6 {
  margin-left: 0.38rem;
}

.mt-6 {
  margin-top: 0.38rem;
}

.ml-8 {
  margin-left: 0.5rem;
}

.mt-8 {
  margin-top: 0.5rem;
}

.ml-10 {
  margin-left: 0.63rem;
}

.mt-10 {
  margin-top: 0.63rem;
}

.ml-12 {
  margin-left: 0.75rem;
}

.mt-12 {
  margin-top: 0.75rem;
}

.ml-14 {
  margin-left: 0.88rem;
}

.mt-14 {
  margin-top: 0.88rem;
}

.ml-16 {
  margin-left: 1rem;
}

.mt-16 {
  margin-top: 1rem;
}

.ml-18 {
  margin-left: 1.13rem;
}

.mt-18 {
  margin-top: 1.13rem;
}

.ml-20 {
  margin-left: 1.25rem;
}

.mt-20 {
  margin-top: 1.25rem;
}

.ml-22 {
  margin-left: 1.38rem;
}

.mt-22 {
  margin-top: 1.38rem;
}

.ml-24 {
  margin-left: 1.5rem;
}

.mt-24 {
  margin-top: 1.5rem;
}

.ml-26 {
  margin-left: 1.63rem;
}

.mt-26 {
  margin-top: 1.63rem;
}

.ml-28 {
  margin-left: 1.75rem;
}

.mt-28 {
  margin-top: 1.75rem;
}

.ml-30 {
  margin-left: 1.88rem;
}

.mt-30 {
  margin-top: 1.88rem;
}

.ml-32 {
  margin-left: 2rem;
}

.mt-32 {
  margin-top: 2rem;
}

.ml-34 {
  margin-left: 2.13rem;
}

.mt-34 {
  margin-top: 2.13rem;
}

.ml-36 {
  margin-left: 2.25rem;
}

.mt-36 {
  margin-top: 2.25rem;
}

.ml-38 {
  margin-left: 2.38rem;
}

.mt-38 {
  margin-top: 2.38rem;
}

.ml-40 {
  margin-left: 2.5rem;
}

.mt-40 {
  margin-top: 2.5rem;
}

.ml-42 {
  margin-left: 2.63rem;
}

.mt-42 {
  margin-top: 2.63rem;
}

.ml-44 {
  margin-left: 2.75rem;
}

.mt-44 {
  margin-top: 2.75rem;
}

.ml-46 {
  margin-left: 2.88rem;
}

.mt-46 {
  margin-top: 2.88rem;
}

.ml-48 {
  margin-left: 3rem;
}

.mt-48 {
  margin-top: 3rem;
}

.ml-50 {
  margin-left: 3.13rem;
}

.mt-50 {
  margin-top: 3.13rem;
}

.ml-52 {
  margin-left: 3.25rem;
}

.mt-52 {
  margin-top: 3.25rem;
}

.ml-54 {
  margin-left: 3.38rem;
}

.mt-54 {
  margin-top: 3.38rem;
}

.ml-56 {
  margin-left: 3.5rem;
}

.mt-56 {
  margin-top: 3.5rem;
}

.ml-58 {
  margin-left: 3.63rem;
}

.mt-58 {
  margin-top: 3.63rem;
}

.ml-60 {
  margin-left: 3.75rem;
}

.mt-60 {
  margin-top: 3.75rem;
}

.ml-62 {
  margin-left: 3.88rem;
}

.mt-62 {
  margin-top: 3.88rem;
}

.ml-64 {
  margin-left: 4rem;
}

.mt-64 {
  margin-top: 4rem;
}

.ml-66 {
  margin-left: 4.13rem;
}

.mt-66 {
  margin-top: 4.13rem;
}

.ml-68 {
  margin-left: 4.25rem;
}

.mt-68 {
  margin-top: 4.25rem;
}

.ml-70 {
  margin-left: 4.38rem;
}

.mt-70 {
  margin-top: 4.38rem;
}

.ml-72 {
  margin-left: 4.5rem;
}

.mt-72 {
  margin-top: 4.5rem;
}

.ml-74 {
  margin-left: 4.63rem;
}

.mt-74 {
  margin-top: 4.63rem;
}

.ml-76 {
  margin-left: 4.75rem;
}

.mt-76 {
  margin-top: 4.75rem;
}

.ml-78 {
  margin-left: 4.88rem;
}

.mt-78 {
  margin-top: 4.88rem;
}

.ml-80 {
  margin-left: 5rem;
}

.mt-80 {
  margin-top: 5rem;
}

.ml-82 {
  margin-left: 5.13rem;
}

.mt-82 {
  margin-top: 5.13rem;
}

.ml-84 {
  margin-left: 5.25rem;
}

.mt-84 {
  margin-top: 5.25rem;
}

.ml-86 {
  margin-left: 5.38rem;
}

.mt-86 {
  margin-top: 5.38rem;
}

.ml-88 {
  margin-left: 5.5rem;
}

.mt-88 {
  margin-top: 5.5rem;
}

.ml-90 {
  margin-left: 5.63rem;
}

.mt-90 {
  margin-top: 5.63rem;
}

.mt-9 {
  margin-top: 0.56rem;
}

.ml-92 {
  margin-left: 5.75rem;
}

.mt-92 {
  margin-top: 5.75rem;
}

.ml-94 {
  margin-left: 5.88rem;
}

.mt-94 {
  margin-top: 5.88rem;
}

.ml-96 {
  margin-left: 6rem;
}

.mt-96 {
  margin-top: 6rem;
}

.ml-98 {
  margin-left: 6.13rem;
}

.mt-98 {
  margin-top: 6.13rem;
}

.ml-100 {
  margin-left: 6.25rem;
}

.mt-100 {
  margin-top: 6.25rem;
}

.ml-3 {
  margin-left: 0.19rem;
}

.mt-15 {
  margin-top: 0.94rem;
}

.ml-4-5 {
  margin-left: 0.28rem;
}

.mt-9-5 {
  margin-top: 0.59rem;
}

.page {
  padding-bottom: 0.88rem;
  background-color: #fafafa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.group {
  padding-bottom: 0.75rem;
}

.section {
  padding: 1.06rem 0.63rem;
  background-image: url("https://shops.cg500.com/static/newimg/17108382003430107259.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.image {
  margin-left: 1.25rem;
  margin-right: 0.47rem;
  width: 20.47rem;
  height: 0.75rem;
}

.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}

.pos {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.font {
  font-size: 15px;
  font-family: PingFang SC;
  line-height: 0.88rem;
  color: #222222;
}

.text {
  font-weight: 500;
  line-height: 1.06rem;
}

.list {
  padding: 0 0.31rem;
}

.section_2 {
  padding: 1.13rem 0 0.84rem;
  filter: drop-shadow(0rem 0rem 0.45rem #d1c6a724);
  border-radius: 0.63rem;
  background-image: url("https://shops.cg500.com/static/newimg/17108382003697031670.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.list-item:first-child {
  margin-top: 0;
}

.image_3 {
  width: 1rem;
  height: 1rem;
}

.group_2 {
  line-height: 1rem;
  height: 1rem;
}

.font_2 {
  font-size: 1rem;
  font-family: HarmonyOS Sans SC;
  line-height: 1rem;
  font-weight: 900;
  color: #151515;
}

.font_3 {
  font-size: 1rem;
  font-family: HarmonyOS Sans SC;
  line-height: 1rem;
  font-weight: 900;
  color: #f6cd58;
}

.font_4 {
  font-size: 1.63rem;
  font-family: PingFang SC;
  line-height: 1.25rem;
  font-weight: 700;
  color: #151515;
}

.font_5 {
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.78rem;
  font-weight: 700;
  color: #151515;
}

.font_6 {
  font-size: 0.69rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #999999;
}

.text_2 {
  line-height: 0.63rem;
}

.section_5 {
  margin-right: 5.59rem;
  margin-top: 0.72rem;
  background-color: #f6ce54;
  border-radius: 0.16rem;
  width: 2.5rem;
  height: 0.31rem;
}

.group_3 {
  width: 15.75rem;
}

.pos_2 {
  position: absolute;
  right: 3.16rem;
  top: 26.22rem;
}

.font_8 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.78rem;
  color: #3c2f2e;
}

.text_4 {
  color: #3c2f2e;
  line-height: 1.06rem;
}

.section_6 {
  margin: 0 0.94rem;
  border-radius: 0.75rem;
  background-image: url("https://shops.cg500.com/static/newimg/17108378076316418899.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.section_7 {
  padding: 1.06rem 1.69rem 1.06rem 2.5rem;
  background-color: #fff8e4;
  border-radius: 0.75rem 0.75rem 0rem 0rem;
  border-left: solid 0.031rem #ffffff;
  border-right: solid 0.031rem #ffffff;
  border-top: solid 0.031rem #ffffff;
  border-bottom: solid 0.031rem #ffffff;
}

.text_5 {
  color: #ff692e;
  font-size: 0.94rem;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 0.91rem;
}

.list_2 {
  padding: 0 0.63rem;
}

.list-item_2 {
  padding: 1.13rem 0.25rem 1.13rem 0.38rem;
  border-bottom: solid 0.031rem #f4f1ef;
}

.font_9 {
  font-size: 15px;
  font-family: PingFang SC;
  line-height: 1rem;
  color: #222222;
}

.text_6 {
  line-height: 0.97rem;
}

.font_10 {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #222222;
}

.font_12 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #666666;
}

.font_11 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.72rem;
  color: #666666;
}
</style>
